<div id="our-company-board">

        <div class="our-company-header">

            <div class="left-our-company">

                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_5tm_bg.png'));?>" width="237" height="252" alt="">

            </div>

            <div class="right-our-company">

                <ul>

                    <li id="issue" class="selected">

                        <div class="item-wrapper" style="display: none;">

                            <a href="#">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_issue_icon.png'));?>"><br>

                                <div class="label">ISSUE</div>

                            </a>

                        </div>

                        <div class="item-wrapper" style="">

                            <a href="#" class="selected">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_issue_icon_hover.png'));?>"><br>

                                <div class="label">ISSUE</div>

                            </a>

                        </div>

                    </li>

                    <li id="insight" class="">

                        <div class="item-wrapper">

                            <a href="#">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_insight_icon.png'));?>"><br>

                                <div class="label">INSIGHT</div>

                            </a>

                        </div>

                        <div class="item-wrapper" style="display: none;">

                            <a href="#" class="selected">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_insight_icon_hover.png'));?>"><br>

                                <div class="label">INSIGHT</div>

                            </a>

                        </div>

                    </li>

                    <li id="ideation" class="">

                        <div class="item-wrapper">

                            <a href="#">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_ideation_icon.png'));?>"><br>

                                <div class="label">IDEATION</div>

                            </a>

                        </div>

                        <div class="item-wrapper" style="display: none;">

                            <a href="#" class="selected">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_ideation_icon_hover.png'));?>"><br>

                                <div class="label">IDEATION</div>

                            </a>

                        </div>

                    </li>



                    <li id="integration" class="">

                        <div class="item-wrapper">

                            <a href="#">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_itegration_icon.png'));?>"><br>

                                <div class="label">INTEGRATION</div>

                            </a>

                        </div>

                        <div class="item-wrapper" style="display: none;">

                            <a href="#" class="selected">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_itegration_icon_hover.png'));?>"><br>

                                <div class="label">INTEGRATION</div>

                            </a>

                        </div>

                    </li>



                    <li id="investment" class="">

                        <div class="item-wrapper">

                            <a href="#">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_invest_icon.png'));?>"><br>

                                <div class="label">INVESTMENT</div>

                            </a>

                        </div>

                        <div class="item-wrapper" style="display: none;">

                            <a href="#" class="selected">

                                <img src="<?php print file_create_url(drupal_get_path_alias('themes/faceintegration/images/our_company_invest_icon_hover.png'));?>"><br>

                                <div class="label">INVESTMENT</div>

                            </a>

                        </div>

                    </li>

                </ul>

                <script type="text/javascript">

                    $(document).ready(function(){



                        $(".right-our-company ul li").each(function(index,item){



                            $(".item-wrapper",$(item)).eq(1).css("display","none");



                            $(item).hover(



                                // Select

                                function(){

                                    focusItem($(item));

                                },



                                // Deselect

                                function(){

                                    if($(this).hasClass("selected")) return;

                                    lostFocusItem($(this));

                                }

                            );



                            $(item).click(function(){

                                item_click($(this));

                            });

                        });



                        item_click($(".right-our-company ul li:first"));



                        function item_click(sender)

                        {

                            $(".right-our-company ul li").removeClass("selected");

                            lostFocusAllItems($(".right-our-company ul li"));



                            var div1 = $(".item-wrapper",sender).eq(0);

                            var div2 = $(".item-wrapper",sender).eq(1);

                            div1.css("display","none");

                            div2.css("display","");



                            sender.addClass("selected");



                            $(".right-our-company .content-company").css("display","none");



                            $(".right-our-company ."+sender.attr("id")).css("display","");

                        }



                        function focusItem(item)

                        {

                            var div1 = $(".item-wrapper",item).eq(0);

                            var div2 = $(".item-wrapper",item).eq(1);

                            div1.css("display","none");

                            div2.css("display","");

                        }



                        function lostFocusItem(item)

                        {

                            var div1 = $(".item-wrapper",item).eq(0);

                            var div2 = $(".item-wrapper",item).eq(1);

                            div1.css("display","");

                            div2.css("display","none");

                        }



                        function lostFocusAllItems(items)

                        {

                            items.each(function(index,item){

                                lostFocusItem($(item));

                            });

                        }

                    })

                </script>

                <div style="clear:both;"></div>

                <div class="issue content-company" style="">

                    <div class="p">What is legal constraint? What is our company business objective? Marketing Objective ? And the gap from strategy to execution...</div>

                </div>

                <div class="insight content-company" style="display: none;">

                    <div class="p">What is the brand issues? Most challenges for the brand to create awareness to consumer mind? ...</div>

                </div>

                <div class="ideation content-company" style="display: none;">

                    <div class="p">What is the big idea behind? Does it address the brand issues?</div>

                </div>

                <div class="integration content-company" style="display: none;">

                    <div class="p">How can the big ideas translate into channel planning? ToM, Channel Planning: MT v.s GT, On premise v.s Off premise, Capabilities: PR, Event, Digital, Shopper Marketing</div>

                </div>

                <div class="investment content-company" style="display: none;">

                    <div class="p">How is it relevant on return on investment? Cost per reach? Cost per Exposure? Cost per conversion?</div>

                </div>

            </div>

        </div>

        <div class="our-company-footer">

            <ul>

                <li>

                    <div>

                        <h4>

                            Who we are

                        </h4>

                        <hr style="background:#CCCCCC;">

                        <br>



                        <div>

                            <h5>A REAL INTEGRATED AGENCY</h5>



                            <div class="p" style="padding-top:20px;">

                                Integration is an integrated advertising agency that develops experiences to connect brands and their audience. As brands look to build collective value with their audiences across multiple touch-points, they need a variety of strategies and tactics to execute marketing programs in perfect harmony.
                            </div>

                        </div>

                    </div>

                </li>



                <li>

                    <div>

                        <h4>

                            What we do

                        </h4>

                        <hr style="background:#CCCCCC;">

                        <br>



                        <div>

                            <h5>WE CONNECT BRAND WITH CUSTOMERS</h5>



                            <div class="p" style="padding-top:20px;">

                                With insight and optimisation in mind, we help our clients identify new opportunities for their brand, create more meaningful brand experiences for their audiences, and develop stronger relationships with their customers. Our ideas deliver continued value to our clients' brand across all channels, in real time.
                            </div>

                        </div>

                    </div>

                </li>



                <li>

                    <div>

                        <h4>

                            Our services

                        </h4>

                        <hr style="background:#CCCCCC;">

                        <br>



                        <div>

                            <h5>A FULL SERVICES AGENCY</h5>



                            <div class="p" style="padding-top:20px;">

                                Our services are the building blocks for our unified marketing strategy framework. We combine the best services to create the most effective marketing programs to engage and deepen relationships with consumers - regardless of medium or channel.
                            </div>

                        </div>

                    </div>

                </li>

            </ul>

        </div>

    </div>